<template>
    <div class="home-hero-sub">
        <div class="home-channel home-channel1"></div>
        <div class="home-channel home-channel2">
            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d8a6d6d37904e22c72130e3e4ec79b41.jpg?w=632&h=340" alt="">
        </div>
        <div class="home-channel home-channel3">
            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0bdb0b3ff4e73fe2a6bf2f8fd399015e.png?w=632&h=340" alt="">
        </div>
        <div class="home-channel home-channel4">
            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/35b3f906861db9d6472206e6d68318d9.jpeg?w=632&h=340" alt="">
        </div>
    </div>
</template>

<script>
export default {
    name: 'HomeHeroSub'
}
</script>

<style lang="less" scoped>
.home-hero-sub {
    width: 100%;
    height: 170px;
    display: flex;
    justify-content: space-between;
    margin-top: 14px;

    .home-channel {
        height: 100%;

        &.home-channel1 {
            width: 234px;
            background-color: #5f5750;
        }

        &.home-channel2,
        &.home-channel3,
        &.home-channel4 {
            width: 316px;
            cursor: pointer;

            img {
                width: 316px;
            }
        }
    }
}
</style>